<!DOCTYPE html> 
<html lang="en">
<head> 
  <title>Unobtrusive JavaScript datePicker demo ~ frequency decoder</title>            
  <meta charset="utf-8" /> 
  <!-- 
  
  Add the English language translation file 
  
  -->
  <script src="./js/lang/zh_CN.js"></script>
  
  <!-- 
  
  Add the datepicker script and set the ARIA describedby property to point to 
  the table that explains keyboard controls (by passing it in a JSON block 
  within the script tag). Don't worry, you don't have to set the describedby 
  parameter, I'm just showing you how it can be done. 
  
  -->
  <script src="./js/datepicker.min.js">{"describedby":"fd-dp-aria-describedby"}</script>
  
  <!-- Styles for the demo -->
  <link href="./css/demo.css"       rel="stylesheet" type="text/css" />
      
  <!-- Add the datepicker stylesheet -->
  <link href="./css/datepicker.css" rel="stylesheet" type="text/css" />
</head>
<body>
  <form method="post" action="">
    <h1>Unobtrusive JavaScript datepicker widgit</h1>  
    <!-- The ARIA describedby property set above points to the following div -->    
    <div id="fd-dp-aria-describedby">       
      <h2>Keyboard Controls</h2>
      <table cellpadding="0" cellspacing="0" border="0">
        <tbody>
          <tr><td><kbd>&larr;</kbd> <kbd>&rarr;</kbd> <kbd>&uarr;</kbd> <kbd>&darr;</kbd></td><td>Day navigation</td></tr>
          <tr><td><kbd>Page Up</kbd></td><td>Previous month</td></tr>
          <tr><td><kbd>Page Down</kbd></td><td>Next month</td></tr>
          <tr><td><kbd>Ctrl</kbd> + <kbd>page up</kbd></td><td>Previous year</td></tr>
          <tr><td><kbd>Ctrl</kbd> + <kbd>page down</kbd></td><td>Next year</td></tr>          
          <tr><td><kbd>Space</kbd></td><td>Today&#8217;s date</td></tr>
          <tr><td><kbd>Esc</kbd></td><td>Close datepicker (without selecting date)</td></tr>
          <tr><td><kbd>Return</kbd></td><td>Select highlighted date and close datepicker</td></tr>
          <tr><td><kbd>2</kbd>&ndash;<kbd>7</kbd></td><td>Select the corresponding day as the first day of the week</td></tr>
        </tbody>
      </table>
    </div>
    <!-- 
      
    DEMO #1 
      
    -->
    <fieldset>
      <legend>Demo #1</legend> 
      <ul>
        <li>A bare-bones datepicker that uses a single text input to represent the day, month and year date parts</li>
      </ul>
      <label for="demo-1">Date</label> <input type="text" class="w8em" id="demo-1" name="demo-1" value="" maxlength="10" />
    </fieldset>
    <script>
datePickerController.createDatePicker({ 
    // Associate the text input to a DD/MM/YYYY date format                            
    formElements:{"demo-1":"%d/%m/%Y"}
    }); 
    </script> 
    <!-- 
      
    DEMO #2 
      
    -->      
    <fieldset>
      <legend>Demo #2</legend> 
      <ul>
        <li>Displaying the week number within the datePicker interface</li>
        <li>Setting a statusbar date format</li>
        <li>
          Disabling various dates and then re-enabling some of them - to show you how the order of the disable/enable calls are important. Dates are disabled/enabled in the following order:
          <ol>
            <li>Disable March the 13<sup>th</sup> for all years</li>
            <li>Disable the 25<sup>th</sup> to the 31<sup>st</sup> for all months and all years</li>
            <li>Disable July 01<sup>st</sup> to July 08<sup>th</sup> for all years</li>
            <li>Disable today&#8217;s date</li>
            <li>Enable the 03<sup>th</sup> to the 05<sup>th</sup> of July for all years</li>
            <li>Enable the 25<sup>th</sup> December for all years</li>
          </ol>
        </li>
      </ul>
      <label for="demo-2">Date</label> <input type="text" class="w8em" id="demo-2" name="demo-2" value="" />
    </fieldset>
    <script>
// Create a few variables to pass to the datePicker      
var disabledDates = {
    // Disable March the 13th for all years
    "****0313":1,
    // Disable the 25th to the 31st for all months and all years
    "******25":"******31",
    // Disable July 01st to July 08th for all years    
    "****0701":"****0708"
    },
    enabledDates  = {
    // Enable the 03rd to the 05th of July for all years - this should
    // take precedence over the last disabled date rule declared above
    "****0703":"****0705",
    // Enable Christmas day for all years - this should take precedence
    // over the second disabled rule above
    "****1225":1
    };

    // Disable today's date
    disabledDates[datePickerController.dateToYYYYMMDDStr(new Date())] = 1;
        
// Create the datePicker
datePickerController.createDatePicker({ 
    // Associate the three text inputs to their date parts                            
    formElements:{"demo-2":"%d/%m/%Y"},
    // Show week numbers
    showWeeks:true,
    // Set a statusbar format
    statusFormat:"%l, %d%S %F %Y" 
    });

// Disable the required dates
datePickerController.setDisabledDates("demo-2", disabledDates);
// Enable the required dates. As these have been set after the  
// disabled dates they will take precedence.        
datePickerController.setEnabledDates("demo-2", enabledDates);
    </script> 
    <!-- 
      
    DEMO #3
      
    -->
    <fieldset>
      <legend>Demo #3</legend>
      <ul>
        <li>Using three text inputs to represent the individual day, month and year date parts</li>
        <li>Removing the &#8220;today&#8221; button from the U.I.</li>
        <li>Disabling the 25<sup>th</sup> of December for all years</li>
        <li>Filling the entire grid with dates</li>
        <li>Enabling the selection of all dates rendered within the grid</li>
      </ul>     
      <input type="text" class="w2em" id="demo-3-dd" name="demo-3-dd" value="" maxlength="2" placeholder="DD" />
      /
      <input type="text" class="w2em" id="demo-3-mm" name="demo-3-mm" value="" maxlength="2" placeholder="MM" />
      /
      <input type="text" class="w4em" id="demo-3" name="demo-3" value="" maxlength="4" placeholder="YYYY" />
    </fieldset> 
    <script> 
datePickerController.createDatePicker({                            
    // Associate the three text inputs to their date parts 
    formElements:{"demo-3":"%Y","demo-3-mm":"%m","demo-3-dd":"%d"},
    // Show the week numbers
    showWeeks:true,
    // Set a statusbar format
    statusFormat:"%l, %d%S %F %Y", 
    // Remove the "Today" button
    noTodayButton:true,
    // Fill the entire grid with dates
    fillGrid:true,
    // Enable the selection of dates not within the current month
    // but rendered within the grid (as we used fillGrid:true)
    constrainSelection:false
    });
// Disable the 25th of December for all years
datePickerController.setDisabledDates("demo-3", {"****1225":1});
    </script> 
    <!-- 
     
    DEMO #4 
     
    -->
    <fieldset>
      <legend>Demo #4</legend>
      <ul>
        <li>Using three select lists to represent the day, month and year date parts</li>
        <li>Disabling Monday and Tuesday</li>
        <li>Using a callback function to display a long-hand date format beside the form elements</li>
      </ul>     
      <p>Note: the high &amp; low ranges will be automatically calculated by the script when a select list is used to represent the year date part, so there&#8217;s no need to set a <code>rangeLow</code> or <code>rangeHigh</code> when creating the datepicker.</p>
      <select id="date-sel-dd" name="date-sel-dd">
        <option value="-1">Day</option>
        <option value="1">1st</option>
        <option value="2">2nd</option>
        <option value="3">3rd</option>
        <option value="4">4th</option>
        <option value="5">5th</option>
        <option value="6">6th</option>
        <option value="7">7th</option>
        <option value="8">8th</option>
        <option value="9">9th</option>
        <option value="10">10th</option>
        <option value="11">11th</option>
        <option value="12">12th</option>
        <option value="13">13th</option>
        <option value="14">14th</option>
        <option value="15">15th</option>
        <option value="16">16th</option>
        <option value="17">17th</option>
        <option value="18">18th</option>
        <option value="19">19th</option>
        <option value="20">20th</option>
        <option value="21">21st</option>
        <option value="22">22nd</option>
        <option value="23">23rd</option>
        <option value="24">24th</option>
        <option value="25">25th</option>
        <option value="26">26th</option>
        <option value="27">27th</option>
        <option value="28">28th</option>
        <option value="29">29th</option>
        <option value="30">30th</option>
        <option value="31">31st</option>
      </select>
      <select id="date-sel-mm" name="date-sel-mm">
        <option value="-1">Month</option>
        <option value="1">January</option>
        <option value="2">February</option>
        <option value="3">March</option>
        <option value="4">April</option>
        <option value="5">May</option>
        <option value="6">June</option>
        <option value="7">July</option>
        <option value="8">August</option>
        <option value="9">September</option>
        <option value="10">October</option>
        <option value="11">November</option>
        <option value="12">December</option>
      </select>
      <select id="date-sel" name="date-sel">
        <option value="-1">Year</option>
        <option value="1970">1970</option>
        <option value="1971">1971</option>
        <option value="1972">1972</option>
        <option value="1973">1973</option>
        <option value="1974">1974</option>
        <option value="1975">1975</option>
        <option value="1976">1976</option>
        <option value="1977">1977</option>
        <option value="1978">1978</option>
        <option value="1979">1979</option>
        <option value="1980">1980</option>
        <option value="1981">1981</option>
        <option value="1982">1982</option>
        <option value="1983">1983</option>
        <option value="1984">1984</option>
        <option value="1985">1985</option>
        <option value="1986">1986</option>
        <option value="1987">1987</option>
        <option value="1988">1988</option>
        <option value="1989">1989</option>
        <option value="1990">1990</option>
      </select>
      <!-- 
      
      A span to display the long-hand date format using the "showEnglishDate" 
      function defined below 
      
      -->
      <span id="date-sel-out"></span>
    </fieldset>
    <script type="text/javascript">           
datePickerController.createDatePicker({                            
    formElements:{"date-sel":"%Y","date-sel-mm":"%n","date-sel-dd":"%j"},
    showWeeks:true,
    statusFormat:"%l, %d%S %F %Y",
    // Fill the entire grid with dates
    fillGrid:true,
    // Disable the selection of dates not within the current month
    // but rendered within the grid (as we used fillGrid:true)
    constrainSelection:true,
    // Set a final opacity of 90%
    finalOpacity:95,
    // Disable Monday (index =0) and Tuesday (index = 1)
    disabledDays:[1,1,0,0,0,0,0],
    // The function "showEnglishDate" is declared below
    callbackFunctions:{"create":[showEnglishDate],"dateset":[showEnglishDate]}                                                       
    });

// This is the actual function used by the "create" and "dateset" events
function showEnglishDate(argObj) {
    // Grab the span & get a more English-ised version of the selected date
    var spn = document.getElementById(argObj.id+"-out"),
        formattedDate = !argObj.date ? "Please select a valid date" : datePickerController.printFormattedDate(argObj.date, "%l, %d%S %F %Y", false);
    
    // Remove the current contents of the span
    while(spn.firstChild) {
        spn.removeChild(spn.firstChild);
    };
    
    // Add a new text node containing our formatted date
    spn.appendChild(document.createTextNode(formattedDate));
};
    </script> 
    <!-- 
      
    DEMO #5 
     
    -->
    <fieldset>
      <legend>Demo #5</legend>
      <ul>
        <li>Using both text inputs and select lists to represent the day, month and year date parts</li>
        <li>Positioning the button within a specified DOM node (which is why it&#8217;s rendered to the left of the associated form controls)</li>
        <li>Highlighting Monday only</li>
      </ul>
      <!-- 
      
      The datePicker button is created as a child of the following span 
      
      -->
      <span id="demo-5-button"></span>
      <select id="demo-5-dd" name="demo-5-dd">
        <option value="-1">Day</option>
        <option value="1">1st</option>
        <option value="2">2nd</option>
        <option value="3">3rd</option>
        <option value="4">4th</option>
        <option value="5">5th</option>
        <option value="6">6th</option>
        <option value="7">7th</option>
        <option value="8">8th</option>
        <option value="9">9th</option>
        <option value="10">10th</option>
        <option value="11">11th</option>
        <option value="12">12th</option>
        <option value="13">13th</option>
        <option value="14">14th</option>
        <option value="15">15th</option>
        <option value="16">16th</option>
        <option value="17">17th</option>
        <option value="18">18th</option>
        <option value="19">19th</option>
        <option value="20">20th</option>
        <option value="21">21st</option>
        <option value="22">22nd</option>
        <option value="23">23rd</option>
        <option value="24">24th</option>
        <option value="25">25th</option>
        <option value="26">26th</option>
        <option value="27">27th</option>
        <option value="28">28th</option>
        <option value="29">29th</option>
        <option value="30">30th</option>
        <option value="31">31st</option>
      </select>
      <select id="demo-5-mm" name="demo-5-mm">
        <option value="-1">Month</option>
        <option value="1">January</option>
        <option value="2">February</option>
        <option value="3">March</option>
        <option value="4">April</option>
        <option value="5">May</option>
        <option value="6">June</option>
        <option value="7">July</option>
        <option value="8">August</option>
        <option value="9">September</option>
        <option value="10">October</option>
        <option value="11">November</option>
        <option value="12">December</option>
      </select>
      <input type="text" name="demo-5" id="demo-5" maxlength="4" class="w4em" />        
      </fieldset>
      <script>
datePickerController.createDatePicker({                            
    formElements:{"demo-5":"%Y","demo-5-mm":"%n","demo-5-dd":"%j"},
    showWeeks:true,
    statusFormat:"%l, %d%S %F %Y",
    // Highlight Monday only 
    highlightDays:[1,0,0,0,0,0,0],
    // Position the button in a wrapper span to the left of the input
    positioned:"demo-5-button"                
    });
      </script>
      <!-- 
      
      DEMO #6 
      
      -->
    <fieldset>
      <legend>Demo #6</legend>
      <ul>
        <li>Using a select list to represent both the month and year date parts</li>
      </ul>
      <p>Note: the high &amp; low ranges will be automatically calculated by the script when a select list is used to represent the year date part, so there&#8217;s no need to set a <code>rangeLow</code> or <code>rangeHigh</code> when creating the datepicker.</p>
      <input type="text" class="w2em" id="demo-6" name="demo-6" maxlength="2" />
      <select id="demo-6-1" name="demo-6-1">
        <option value="-1">Month &amp; Year</option>
        <option value="012008">January 2008</option>
        <option value="022008">February 2008</option>
        <option value="032008">March 2008</option>
        <option value="042008">April 2008</option>
        <option value="052008">May 2008</option>
        <option value="062008">June 2008</option>
        <option value="072008">July 2008</option>
        <option value="082008">August 2008</option>
        <option value="092008">September 2008</option>
        <option value="102008">October 2008</option>
        <option value="112008">November 2008</option>
        <option value="122008">December 2008</option>
      </select>          
    </fieldset>
    <script>           
datePickerController.createDatePicker({                            
    formElements:{"demo-6-1":"%m%Y","demo-6":"%d"},
    showWeeks:true,
    fillGrid:true,
    constrainSelection:false,
    statusFormat:"%l, %d%S %F %Y"       
    });
    </script>
    <!-- 
     
    DEMO #7 
    
    -->
    <fieldset>
      <legend>Demo #7</legend>
      <ul>
        <li>Using a select list to represent the day, month and year date parts (let&#8217;s be honest - you probably wouldn&#8217;t ever do this but the code makes allowances for it and so might as well be demoed)</li>
        <li>Testing the <code>enable</code> and <code>disable</code> methods</li>
      </ul>
      <p>Note: the high &amp; low ranges will be automatically calculated by the script when a select list is used to represent the year date part, so there&#8217;s no need to set a <code>rangeLow</code> or <code>rangeHigh</code> when creating the datepicker.</p>
      <select id="demo-7" name="demo-7">
        <option value="-1">Day, Month &amp; Year</option>
        <option value="01012008">01st January 2008</option>
        <option value="06022008">06th February 2008</option>
        <option value="09032008">09th March 2008</option>
        <option value="22042008">22nd April 2008</option>
        <option value="11052008">11th May 2008</option>
        <option value="11062008">11th June 2008</option>
        <option value="15072008">15th July 2008</option>
        <option value="28082008">28th August 2008</option>
        <option value="08092008">08th September 2008</option>
        <option value="12102008">12th October 2008</option>
        <option value="16112008">16th November 2008</option>
        <option value="17122008">17th December 2008</option>
      </select>          
      <button onclick="datePickerController.disable('demo-7'); return false;">Disable</button> <button onclick="datePickerController.enable('demo-7'); return false;">Enable</button>           
    </fieldset>
    <script>           
datePickerController.createDatePicker({
    // Associate the select list above and set the date format to match
    // the options value                           
    formElements:{"demo-7":"%d%m%Y"},
    showWeeks:true,
    statusFormat:"%l, %d%S %F %Y"       
    });
    </script>
    <!-- 
     
    DEMO #8 
     
    -->
    <fieldset>
      <legend>Demo #8</legend>
      <ul>
        <li>Setting bespoke statusbar titles for Christmas day, new years eve and new years day</li>
        <li>Setting a callback function for the &#8220;redraw&#8221; event that dynamically calculates and disables Easter Monday for the given year and sets a bespoke title that reads &#8220;Easter Monday&#8221; for the date in question</li>
        <li>Setting the <code>rangeLow</code> to be today&#8217;s date</li>
      </ul>
      <label for="demo-8">Date</label> 
      <input type="text" class="w8em" id="demo-8" name="demo-8" value="" />
    </fieldset>  
    <script>           
datePickerController.createDatePicker({                            
    formElements:{"demo-8":"%d/%m/%Y"},
    showWeeks:true,
    // Set a list of titles to use in the statusbar for specific dates
    bespokeTitles:{
        // The 25th of December for all years
        "****1225":"Christmas Day",
        // The 31st of December for all years
        "****1231":"New Years Eve",
        // The 1st of January for all years
        "****0101":"New Years Day"
        },
    statusFormat:"%l, %d%S %F %Y",
    // Set the rangeLow to be today's date
    rangeLow:datePickerController.dateToYYYYMMDDStr(new Date()),
    // Set a callback function for the redraw event
    callbackFunctions:{"redraw":[function(argObj) { 

        // Dynamically calculate Easter Monday - I've forgotten where this code 
        // was originally found and I don't even know if it returns a valid
        // result in all cases.
        
        // Only run the code if the month is March or April though
        if(+argObj.mm < 3 || +argObj.mm > 4) {
            return;
        };
        
        var y = argObj.yyyy,
            a=y%4,
            b=y%7,
            c=y%19,
            d=(19*c+15)%30,
            e=(2*a+4*b-d+34)%7,
            m=Math.floor((d+e+114)/31),
            g=(d+e+114)%31+1,            
            yyyymmdd = y + "0" + m + String(g < 10 ? "0" + g : g),
            ret = {},
            titles = {};          
        
        // Disable the date
        ret[yyyymmdd] = 1;
        datePickerController.addDisabledDates(argObj.id, ret);
        
        // Just for fun, also set an "Easter Monday" status bar title for the
        // date we just calculated
        ret[yyyymmdd] = "Easter Monday"; 
        
        datePickerController.addBespokeTitles(argObj.id, ret);
       
        }]}                               
    });
    </script>
    <!-- 
      
    DEMO #9 
      
    -->
    <fieldset>
      <legend>Demo #9</legend>
      <ul>
        <li>Creating a static (inline) datepicker</li>
        <li>Setting the opacity to 90%</li>
      </ul>
      <label for="demo-9">Date</label> 
      <input type="text" class="w16em" id="demo-9" name="demo-9" value="" /> 
    </fieldset>
    <script>
datePickerController.createDatePicker({                            
    formElements:{"demo-9":"%d/%m/%Y"},
    showWeeks:true,
    statusFormat:"%l, %d%S %F %Y",
    // We want an inline datepicker
    staticPos:true,
    // Set an opacity of 90%
    finalOpacity:90                  
    });
    </script>
    <!-- 
      
    DEMO #10 
      
    -->
    <fieldset>
      <legend>Demo #10</legend>
      <ul>
        <li>Creating a static (inline) datepicker</li>
        <li>Filling the entire grid with dates</li>
        <li>Enabling the selection of all dates rendered within the grid</li>
        <li>Testing the <code>enable</code> and <code>disable</code> methods</li>
      </ul>
      <label for="demo-10">Date</label> <input type="text" class="w16em" id="demo-10" name="demo-10" value="" />
      <button onclick="datePickerController.disable('demo-10'); return false;">Disable</button> <button onclick="datePickerController.enable('demo-10'); return false;">Enable</button> 
    </fieldset>
    <script>
datePickerController.createDatePicker({                            
    formElements:{"demo-10":"%d/%m/%Y"},
    showWeeks:true,
    statusFormat:"%l, %d%S %F %Y",
    staticPos:true,
    fillGrid:true,
    // Enable the selection of all dates rendered within the grid
    constrainSelection:false                  
    });
    </script>
    <!-- 
      
    DEMO #11 
      
    -->
    <fieldset>
      <legend>Demo #11</legend>
      <ul>
        <li>Removing the associated input from the U.I.</li>
      </ul>
      <input type="text" class="w16em" id="demo-11" name="demo-11" value="" />           
    </fieldset>
    <script>
datePickerController.createDatePicker({                            
    formElements:{"demo-11":"%d/%m/%Y"},
    showWeeks:true,
    statusFormat:"%l, %d%S %F %Y",
    staticPos:true,
    fillGrid:true,
    // Remove the associated input from the U.I.
    hideInput:true                  
    });
    </script>
  </form>
</body>
</html>

